import {Map, Marker,Polyline, NavigationControl, InfoWindow,Polygon} from 'react-bmapgl';
// Map地图  Marker标记  NavigationControl导航控制  InfoWindow信息窗口
// Polyline 折线 ,Polygon多边形
import {useState,useEffect} from 'react'
// 使用状态与副作用
import {getOrderDetail} from '../../../api/index'
function OrderDetail() {
    // 定义list数据
    var [list,setList] = useState({});
    useEffect(()=>{
        // 获取数据
        getOrderDetail()
        .then(res=>{
            if(res.data.code==0){
                // 更新数据
                setList(res.data.list)
            }
        })
        .catch(err=>console.log(err))
    },[])
    return ( <div>  
        {/* 设置高，鼠标可以滚动 */}
        {list.order_sn&&<Map 
        style={{height:"600px"}}
        enableScrollWheelZoom="true"
        // 定义中心为用户骑行的的中心点
        center={{lng:list.position_list[Math.ceil(list.position_list.length/2)].lng, lat:list.position_list[Math.ceil(list.position_list.length/2)].lat}} zoom="13">
            {/* 定义开始与结束起点 */}
            <Marker icon="start" position={{lng:list.position_list[0].lng, lat: list.position_list[0].lat}} />
            <Marker icon="end" position={{lng:list.position_list[list.position_list.length-1].lng, lat: list.position_list[list.position_list.length-1].lat}} />
            {/* 绘制折线 */}
            <Polyline
          path={list.position_list}
          strokeColor="#f00"
          strokeWeight={2}
        />
        {/* 绘制多边形区域 */}
          <Polygon
          path={list.area }
          strokeColor="#f00"
          strokeWeight={2}
          fillColor="#ff0"
          fillOpacity={0.1}
          onMouseover={e => {console.log(e)}}
        />
            <NavigationControl /> 
            <InfoWindow  position={{lng:list.position_list[0].lng, lat: list.position_list[0].lat}}  text={'用户：'+list.user_name+'<br/>时长：'+Math.ceil(list.total_time/60)+'分钟'} title="订单信息"/>
        </Map>}
    </div> );
}

export default OrderDetail;